<template>
  <div class="document-online">
    <div v-if="!showSecondary" class="main">
      <JeList
        class="onlyOffice"
        title="OnlyOffice"
        :info="$t('document.officeTip')"
        :is-show="true"
        @listClick="($event) => listClick('OnlyOffice', $event)"
      >
        <template #left
          ><Radio
            v-model:checked="OnlyOffice"
            class="my-checkbox"
            @click="changeSelect('OnlyOffice')"
          ></Radio
        ></template>
      </JeList>
      <JeList
        class="WPS"
        :title="$t('document.wps')"
        :info="$t('document.wpsTip')"
        :is-show="true"
        @listClick="($event) => listClick('WPS', $event)"
      >
        <template #left
          ><Radio v-model:checked="WPS" class="my-checkbox" @click="changeSelect('WPS')"></Radio
        ></template>
      </JeList>
      <JeList class="NotEnabled" :title="$t('document.unUse')" :info="$t('document.unUseTip')">
        <template #left
          ><Radio
            v-model:checked="NotEnabled"
            class="my-checkbox"
            @click="changeSelect('NotEnabled')"
          ></Radio
        ></template>
      </JeList>
    </div>
    <div v-else class="secondary">
      <OnlineSecondary
        :secondary-name="secondaryName"
        :data-all="dataAllSon"
        @showMain="showMain"
      />
    </div>
  </div>
</template>

<script>
  import OnlineSecondary from './online-secondary.vue';
  import JeList from '@/components/je-list.vue';
  import { Radio, Modal } from '@jecloud/ui';
  import { onUnmounted, reactive, ref } from 'vue';
  import VueEvent from '@/helper/model/event';
  import { useOpenDialog } from '@/hooks';
  import { saveConfigData } from '@/api';
  import { onScroll } from '@/utils/utils';
  export default {
    name: 'DocumentOnline',
    components: {
      JeList,
      Radio,
      OnlineSecondary,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      // 接受父组件的传值
      const dataAllSon = reactive(props.dataAll);
      let formState = {
        JE_SYS_DOCUMENT: 'NotEnabled',
      };

      // 对比项
      let meta = {};
      let res = {};

      // 单选项
      const OnlyOffice = ref(null);
      const WPS = ref(null);
      const NotEnabled = ref(null);

      // 转换数据
      const changeDataType = (parame) => {
        // 回显数据
        res = parame.filter((item) => {
          return item.key === 'DocumentOnline';
        });
        res[0]?.items.find((item) => {
          formState[item.code] = item['value'];
        });
        // 回显选择radio项
        if (formState.JE_SYS_DOCUMENT === 'WPS') {
          WPS.value = true;
        } else if (formState['JE_SYS_DOCUMENT'] === 'OnlyOffice') {
          OnlyOffice.value = true;
        } else if (formState.JE_SYS_DOCUMENT === 'NotEnabled') {
          NotEnabled.value = true;
        }
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType(props.dataAll);

      const dataCallback = (data) => {
        changeDataType(data);
      };

      // 表单数据是否改变
      const isChange = () => {
        return meta.JE_SYS_DOCUMENT === formState.JE_SYS_DOCUMENT;
      };
      // 是否显示二级页面
      const showSecondary = ref(false);
      // 点击导航判断页面值是否改变，改变则弹出对话框
      const isSaveCallback = () => {
        // 如果子页面已显示就返回
        if (showSecondary.value) return false;
        if (isChange()) return changeBar();
        useOpenDialog({
          attribute: 'document-online',
          allFields: JSON.stringify(formState),
        });
      };

      // 子页面名字
      const secondaryName = ref(null);

      // 显示相应子页面
      const listClick = (val, bol) => {
        showSecondary.value = bol;
        secondaryName.value = val;
      };
      // 关闭子页面
      const showMain = (val) => {
        showSecondary.value = val;
      };
      // 单项选择点击事件
      const changeSelect = (val) => {
        if (val === 'WPS') {
          if (WPS.value === true) return;
          WPS.value = !WPS.value;
          OnlyOffice.value = NotEnabled.value = false;
          formState.JE_SYS_DOCUMENT = 'WPS';
        } else if (val === 'OnlyOffice') {
          if (OnlyOffice.value === true) return;
          OnlyOffice.value = !OnlyOffice.value;
          WPS.value = NotEnabled.value = false;
          formState.JE_SYS_DOCUMENT = 'OnlyOffice';
        } else if (val === 'NotEnabled') {
          if (NotEnabled.value === true) return;
          NotEnabled.value = !NotEnabled.value;
          WPS.value = OnlyOffice.value = false;
          formState.JE_SYS_DOCUMENT = 'NotEnabled';
        }
      };
      // 保存的回调事件
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: 'document-online',
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            !showSecondary.value && Modal.notice('保存成功', 'success'),
            VueEvent.emit('changeAllData', { item: 'document-online', formState }),
          );
        } else {
          // 如果显示了子页面就不提示
          if (!showSecondary.value) {
            Modal.notice('无数据操作!', 'info');
          }
        }
      };

      // 是否切换左侧菜单栏
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };

      // 搜索：切换到相应子页面
      const toSubpage = (data) => {
        const { name, parentName } = { ...data };
        if (parentName) {
          listClick(name, true);
        }
      };

      // 滚动及动画
      const onScrolled = () => {
        // 关闭子页面，要不然在子页面打开时没有效果
        showSecondary.value = false;
        // 倒计时加延迟才有效果
        setTimeout(() => {
          onScroll();
        }, 100);
      };
      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('sendData', dataCallback);
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('toSubpage', toSubpage);
      VueEvent.on('fadeScroll', onScrolled);
      onUnmounted(() => {
        VueEvent.off('toolbarSaveEvent', clickCallback);
        VueEvent.off('sendData', dataCallback);
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('toSubpage', toSubpage);
        VueEvent.off('fadeScroll', onScrolled);
      });

      return {
        showSecondary,
        listClick,
        showMain,
        WPS,
        OnlyOffice,
        NotEnabled,
        changeSelect,
        secondaryName,
        dataAllSon,
      };
    },
  };
</script>

<style lang="less" scoped>
  .document-online {
    padding: 30px 100px 0 100px;
    width: 100%;
    font-size: 14px;
    color: #333333;
  }
</style>
